<template>
  <div v-loading="loading">
    <div>
      <el-input placeholder="请输入日志类型后回车" v-model="searchConfig.SearchText.Logger" @change="handleSearch" style="width:200px;"></el-input>
      <el-input placeholder="请输入日志消息后回车" v-model="searchConfig.SearchText.Message" @change="handleSearch" style="width:200px;"></el-input>
      <el-input placeholder="请输入线程后回车" v-model="searchConfig.SearchText.Thread" @change="handleSearch" style="width:150px;"></el-input>
      <el-date-picker placeholder="请输入开始日期后回车" v-model="searchConfig.SearchText.DateBegin" @change="handleSearch"
            value-format="yyyy-MM-dd" align="right" type="date"></el-date-picker>
      <el-date-picker placeholder="请输入结束日期后回车" v-model="searchConfig.SearchText.DateEnd" @change="handleSearch"
            value-format="yyyy-MM-dd" align="right" type="date"></el-date-picker>
      <el-button @click="handleClear" type="button">清空</el-button>
      &nbsp;<span>（最近三个月的数据）</span>
    </div>
    <el-table ref="singleTable"
              :data="tableData"
              highlight-current-row
              @current-change="handleCurrentChange"
              size="mini"
              style="width: 100%">
      <el-table-column type="index"
                       width="50">
      </el-table-column>
      <el-table-column property="Date"
                       label="日期" :show-overflow-tooltip="true"
                       width="145">
      </el-table-column>
      <el-table-column property="Logger"
                       label="类型" :show-overflow-tooltip="true"
                       width="120">
      </el-table-column>
      <el-table-column property="Thread"
                       label="线程" :show-overflow-tooltip="true"
                       width="70">
      </el-table-column>
      <el-table-column property="Level"
                       label="等级" :show-overflow-tooltip="true"
                       width="70">
      </el-table-column>
      <el-table-column property="Message"
                       label="消息" :show-overflow-tooltip="true"
                       width="250">
      </el-table-column>
      <el-table-column property="Exception"
                       label="异常" :show-overflow-tooltip="true"
                       width="150">
      </el-table-column>
      <el-table-column property="TraceStack"
                       label="堆栈" :show-overflow-tooltip="true"
                       width="200">
      </el-table-column>
      <el-table-column property="Url"
                       label="Url" :show-overflow-tooltip="true"
                       width="120">
      </el-table-column>
      <el-table-column property="UrlRefer"
                       label="UrlRefer" :show-overflow-tooltip="true"
                       width="120">
      </el-table-column>
      <el-table-column property="Cookie" :show-overflow-tooltip="true"
                       label="Cookie"
                       width="120">
      </el-table-column>
      <el-table-column property="Session" :show-overflow-tooltip="true"
                       label="Session">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="100">
        <template slot-scope="scope">
          <el-button class="copyBtn" @click="handleCopy(scope.row)" dataIndex="index" type="text" size="small">复制</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <span style="float:right; font-size:10px;">
      第 <el-input v-model.number="searchConfig.PageCurrent" @change="handleSearch" style="width:60px;" size="mini"></el-input> 页 | 共  {{pageCount}} 页 | 每页100条
    </span>
  </div>
</template>

<script>
  import Clipboard from 'clipboard';
  export default {
    name: 'RecentLog',
    data() {
      return {
        tableData: [],
        allData: [],
        loading: false,
        dataCount: 1,
        searchConfig: {
          PageSize: 100,
          PageCurrent: 1,
          SearchText: {
            DateBegin: null,
            DateEnd: null,
            Thread: null,
            Level: null,
            Logger: null,
            Message: null,
            Exception: null,
            TraceStack: null,
            Url: null,
            UrlRefer: null,
            Cookie: null,
            Session: null
          }
        },
        currentRow: {},
        dialogFormVisible: false,
        url: this.$store.state.serviceUrl
      };
    },
    computed: {
      pageCount() {
        return Math.ceil(this.dataCount / this.searchConfig.PageSize);
      }
    },
    methods: {
      handleCopy(val) {
        var self = this;
        var clipboard = new Clipboard('.copyBtn', {
          text: function (trigger) {
            let result = "";
            var keys = Object.keys(val);
            for (var i = 0; i < keys.length; i++) {
              result += keys[i] + ":\n" + val[keys[i]] + "\n";
            }
            return result;
          }
        });
        clipboard.on('success', function (e) {
          self.$message("复制完成");
        });
        clipboard.on('error', function (e) {
          self.$message("复制失败");
        });

      },
      handleClear() {
        var keys = Object.keys(this.searchConfig.SearchText);
        for (var i = 0; i < keys.length; i++) {
          this.searchConfig.SearchText[keys[i]] = null;
        }
        this.refreshData();
      },
      handleSearch() {
        this.refreshData();
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      refreshData() {
        this.loading = true;
        this.$http.post(this.url, { type: "GetRecentLog", config: Base64.encode(JSON.stringify(this.searchConfig)) }, { emulateJSON: true }).then((m) => {
          this.allData = m.body.LogList;
          this.tableData = m.body.LogList;
          this.dataCount = m.body.DataCount;
          this.loading = false;
        }, (e) => {
          this.$message(e.bodyText);
          this.loading = false;
        });
      }
    },
    mounted() {
      var self = this;
      this.refreshData();
    }
  };
</script>
<style>
</style>
